<template>
	<div class="big-main">
		<!-- <router-link to="/user">跳转到用户页面</router-link> -->

		<div class="main">
			<div class="fa">

				<h2 class="person">个人资料</h2>
				<!-- =========================================================== -->

				<label for="editavatar" class="custom-file-input">
					<img class="img" src="../../public/img/t-01.webp" alt="">
					<div class="editavatar">
						上传头像
					</div>
				</label>
				<input type="file" id="editavatar" class="hidden" @change="uploadAVA">
				<br>


				<!-- ========================================== -->


				<!-- 用户昵称和用户账号 -->
				<div class="two-fa two">
					<!-- 用户昵称 -->
					<div class="left">
						<div class="name">昵称</div>
						<!-- 添加v-model -->
						<input class="user-name" type="text" v-model="info.nickname" @change="change">
					</div>
					<!-- 用户电话 -->
					<div class="right">
						<div class="uid">账号</div>
						<!-- 账号仅可读 -->
						<input class="userid" type="text" v-model="info.tel" readonly>
					</div>
				</div>
				<div class="two-fa three">
					<!-- 用户性别 -->
					<div class="left">
						<label for="gender">性别：</label><br>
						<select id="gender" v-model="info.gender" @change="change">
							<option value="保密" class="sex">保密</option>
							<option value="男" class="sex">男</option>
							<option value="女" class="sex">女</option>
						</select>

					</div>

					<!-- 用户类型 -->
					<div class="right">
						<label for="type">用户类型：</label><br>
						<select id="type" v-model="info.type">
							<option value="普通用户" class="sex">普通用户</option>
							<option value="管理员" class="sex" disabled>管理员</option>
						</select>
					</div>
				</div>
				<!-- 修改密码部分 -->
				<div class="updatepwd">
					<div class=" public">
						<h4 style="font-weight: 600;">修改密码</h4>
						<input v-model="info.pwd" class="pwd oldpwd" type="text" placeholder="请输入密码">
					</div>
				</div>


				<!-- 个性签名 -->
				<div class="introduce">
					<div class="name">个性签名</div>
					<textarea v-model="info.intro" @change="change" class="intro" id="" cols="50" rows="5"
						placeholder="描述一下自己吧"></textarea>
				</div>
				<!-- 保存修改 -->
				<button type="submit" class="baocun" @click="submitInfo">保存</button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, getCurrentInstance, onMounted, reactive } from 'vue';
	import { useRouter } from "vue-router";
	let router = useRouter();
	let { proxy } = getCurrentInstance()
	let { proxy: { axios, url } } = getCurrentInstance();
	let info = reactive({
		// 传给后端的头像文件
		file: '',
		nickname: '',
		gender: '',
		tel: '',
		type: '',
		intro: '',
		pwd: ''
	});
	// 展示头像
	let avatar = ref('');
	let uploadAVA = (e) => {
		const file = e.target.files[0];
		info.file = file;
		// 做预览效果
		const url = URL.createObjectURL(file);
		avatar.value = url;
	};

	//点击获取 前端修改过的数据formate，将其传递给后端
	let submitInfo = async () => {
		let formdata = new FormData();
		for (let key in info) {
			formdata.append(key, info[key]);
		};

		formdata.append(`file`, info.file)
		let ufile = formdata.get("file")
		let unickname = formdata.get("nickname")
		let utel = formdata.get("tel")
		let ugender = formdata.get("gender")
		let utype = formdata.get("type")
		let uintro = formdata.get("intro")
		let upwd = formdata.get("pwd")


		console.log("前端修改过得到的数", ufile, unickname, utel, ugender, uintro, upwd);
		let res = await proxy.$axios("/egg/setting", { params: { ufile, unickname, utel, ugender, utype, uintro, upwd } });
		if (res.data.code === 24) {
			console.log(res.data.msg);
			// 跳转回当前页面，实现自动刷新
			// location.reload();
		}
		else {
			console.log(res.data.msg);
		}
	}
	// 获取修改后的信息
	onMounted(async () => {
		let res = await proxy.$axios('/egg/getuserinfo');
		let data = res.data;
		let avatarurl = url + data.avatar;
		info.nickname = data.nickname;
		info.tel = data.tel;
		info.type = data.type;
		info.intro = data.introduction;
		info.gender = data.gender;
		avatar.value = avatarurl;

	});




















</script>

<style lang="scss" scoped>
	.hidden {
		display: none;
	}

	.custom-file-input {
		width: 120px;
		height: 120px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		background-color: transparent;
		color: white;
		cursor: pointer;




		.img {
			width: 80px;
			height: 80px;
			border-radius: 120px;
			margin-top: 30px;
		}

		.editavatar {
			width: 90px;
			height: 42px;
			color: black;
			background-color: rgb(237, 242, 245);
			text-align: center;
			line-height: 42px;
			border-radius: 10px;


		}


	}

	.big-main {
		width: 1560px;
		height: auto;
		background-color: rgb(249, 249, 249);

		.main {
			width: 984px;
			height: 971px;
			margin: 0 auto;
			background-color: white;
			border-radius: 30px;

			.fa {
				width: 800px;
				height: 971px;

				margin: 8px auto;

				/* 个人资料标题 */
				.person {
					font-weight: 900;
				}



				/*  用户昵称 */
				.two-fa {
					width: 800px;
					height: 102px;
					display: flex;
					justify-content: space-between;
					margin: 15px 0px 0px 0px;

					.left {
						width: 350px;
						height: 102px;

						.name {
							font-weight: 700;
							margin-top: 5px;
						}

						.user-name {
							width: 300px;
							height: 50px;
							border-radius: 10px;
							border: 1px solid rgb(154, 154, 156);
							background-color: white;
							margin-top: 10px;

							&:focus {
								outline: none;
							}

							&:hover {
								border: 1px solid rgb(255, 82, 136);
							}


						}
					}

					.right {
						width: 350px;
						height: 102px;

						.uid {
							font-weight: 700;
							margin-top: 5px;
						}

						.userid {
							width: 300px;
							height: 50px;
							border-radius: 10px;
							background-color: white;
							margin-top: 10px;
							border: 1px solid rgb(154, 154, 156);

							&:focus {
								outline: none;
							}

							&:hover {
								border: 1px solid rgb(255, 82, 136);
							}

						}
					}

					/* 性别部分 */
					label {
						font-weight: 700;
					}

					select {
						appearance: none;
						-webkit-appearance: none;
						-moz-appearance: none;
						padding: 5px;
						width: 300px;
						height: 50px;
						border-radius: 12px;
						background-color: white;
						margin-top: 5px;
						border: 1px solid rgb(154, 154, 156);

						&:focus {
							outline: none;
							border: 1px solid rgb(255, 82, 136);
						}

						option {
							width: 300px;
							height: 40px;
							background-color: deeppink;
							margin-top: 10px;

							&:hover {
								background-color: aqua;
							}
						}


					}


				}

				/* 用户密码修改 */
				.updatepwd {
					width: 400px;
					margin-top: 12px;

					.public {
						width: 310px;
						height: auto;
						margin: 0px 0px 5px 0px;

						.pwd {
							width: 300px;
							height: 50px;
							margin: 10px 0px 0px 5px;
							border-radius: 10px;
							border: 1px solid rgb(154, 154, 156);
							background-color: white;

							&:focus {
								outline: none;
								border: 1px solid rgb(255, 82, 136);
							}
						}
					}


				}

				/* 个性签名 */
				.intro {
					&:focus {
						outline: none;
						/* border: 1px solid black; */
					}
				}

				/* 保存修改 */
				.baocun {
					width: 100px;
					height: 50px;
					color: white;
					background-color: rgb(255, 89, 103);
					border: none;
					border-radius: 13px;
					text-align: center;
					line-height: 50px;


					&:hover {
						cursor: pointer;
						background-color: rgb(255, 112, 129);
					}
				}




			}


		}


	}
</style>